create react app
使い方
$ yarn create react-app your-app-name
2020-11-16 00:04:00 実行結果
なんかたくさんpackageが自動で入ってくる
code:sh
$ yarn create react-app hello-react
yarn create v1.22.5
1/4 Resolving packages... 3/4 Linking dependencies... warning " > jscodeshift@0.11.0" has unmet peer dependency "@babel/preset-env@^7.1.6".
4/4 Building fresh packages... success Installed "create-react-app@4.0.0" with binaries:
- create-react-app
Creating a new React app in /home/takker/git/hello-react.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
yarn add v1.22.5
1/4 Resolving packages... info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.2.1: The platform "linux" is incompatible with this module.
info "fsevents@2.2.1" is an optional dependency and failed compatibility check. Excluding it from installation.
3/4 Linking dependencies... warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
4/4 Building fresh packages... success Saved lockfile.
success Saved 29 new dependencies.
info Direct dependencies
├─ cra-template@1.1.0
├─ react-dom@17.0.1
├─ react-scripts@4.0.0
└─ react@17.0.1
info All dependencies
├─ @babel/plugin-proposal-decorators@7.12.1
├─ @babel/plugin-syntax-decorators@7.12.1
├─ @babel/plugin-syntax-flow@7.12.1
├─ @babel/plugin-transform-flow-strip-types@7.12.1
├─ @babel/plugin-transform-runtime@7.12.1
├─ @babel/plugin-transform-typescript@7.12.1
├─ @babel/preset-typescript@7.12.1
├─ babel-plugin-named-asset-import@0.3.7
├─ babel-preset-react-app@10.0.0
├─ cli-width@3.0.0
├─ confusing-browser-globals@1.0.10
├─ core-js@3.7.0
├─ cra-template@1.1.0
├─ eslint-config-react-app@6.0.0
├─ filesize@6.1.0
├─ fork-ts-checker-webpack-plugin@4.1.6
├─ immer@7.0.9
├─ inquirer@7.3.3
├─ promise@8.1.0
├─ react-app-polyfill@2.0.0
├─ react-dev-utils@11.0.0
├─ react-dom@17.0.1
├─ react-error-overlay@6.0.8
├─ react-scripts@4.0.0
├─ react@17.0.1
├─ run-async@2.4.1
├─ rxjs@6.6.3
├─ scheduler@0.20.1
└─ whatwg-fetch@3.5.0
Done in 402.11s.
Initialized a git repository.
Installing template dependencies using yarnpkg...
yarn add v1.22.5
1/4 Resolving packages... info fsevents@2.2.1: The platform "linux" is incompatible with this module.
info "fsevents@2.2.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
3/4 Linking dependencies... warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/user-event@12.2.2" has unmet peer dependency "@testing-library/dom@>=7.21.4".
4/4 Building fresh packages... success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.11.6
├─ @testing-library/react@11.1.2
├─ @testing-library/user-event@12.2.2
├─ react-dom@17.0.1
├─ react@17.0.1
└─ web-vitals@0.2.4
info All dependencies
├─ @testing-library/dom@7.26.6
├─ @testing-library/jest-dom@5.11.6
├─ @testing-library/react@11.1.2
├─ @testing-library/user-event@12.2.2
├─ @types/aria-query@4.2.0
├─ @types/jest@26.0.15
├─ @types/testing-library__jest-dom@5.9.5
├─ css.escape@1.5.1
├─ css@3.0.0
├─ dom-accessibility-api@0.5.4
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.1
├─ react@17.0.1
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ web-vitals@0.2.4
Done in 23.13s.
Removing template package using yarnpkg...
yarn remove v1.22.5
1/2 Removing module cra-template... 2/2 Regenerating lockfile and installing missing dependencies... info fsevents@2.2.1: The platform "linux" is incompatible with this module.
info "fsevents@2.2.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/user-event@12.2.2" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
Done in 5.40s.
Created git commit.
Success! Created hello-react at /home/takker/git/hello-react
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd hello-react
yarn start
Happy hacking!
Done in 450.57s.
directory layout
https://gyazo.com/288b339d615a22f43b033d1f3571e6ae
/icons/typescript.iconに設定できないのか？
--template typescriptで設定できるようだ
こんどはtsxになってくれた
https://gyazo.com/8d98144ed3c543a81fb97aef3c385506
$ cd your-app-name
$ yarn start
References
この手の情報は公式を見たほうが良い
すぐコロコロ使い方が変わる
公式ガイド